{include file="$header" /}
<div class="login-wrapper">
    <div class="login-container">
        <div class="login-body">
            {include file="login/side" /}
            <div class="login-form">
                <div class='login-form-content'>
                    <div class="mk-login-warp">
                        <div class="login-title">管理员修改密码</div>
                        <div class="login-ctitle">ADMIN CHANGE PASSWORD</div>
                        <el-form class="mk-login-form" :model="ruleForm" :rules="rules" ref="ruleForm" @submit.native.prevent>
                            <template v-if="captchaShow">
                                <div class="mk-captcha-title">机器验证</div>
                                <el-form-item v-if=" captcha !== '' " prop="captcha">
                                    <img 
                                        class="mk-captcha-img" 
                                        :src="captcha" 
                                        @click="getCaptcha()" />
                                    <el-input 
                                        class="mk-captcha-code" 
                                        v-model="ruleForm.captcha" 
                                        placeholder="请输入上方的图形验证码"
                                        @keyup.enter.native="getEmailCode()">
                                    </el-input>
                                </el-form-item>
                                <el-button
                                    :disabled="ruleForm.captcha.length === 4 ? false : true"
                                    class="login-btn" 
                                    @click="getEmailCode()" 
                                    :loading="loading" 
                                    plain>
                                    验证
                                </el-button>
                            </template>
                            <template v-else>
                                <el-form-item prop="email">
                                    <el-input 
                                        v-model="ruleForm.email" 
                                        prefix-icon="el-icon-user" 
                                        placeholder="请输入邮箱" 
                                        @input="showGetCode()"
                                        @keyup.enter.native="passwordChange()">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="code" v-if="emailRegular">
                                    <el-input 
                                        style="width: 200px"
                                        v-model="ruleForm.code" 
                                        prefix-icon="el-icon-user" 
                                        placeholder="请输入邮箱验证码" 
                                        @keyup.enter.native="passwordChange()">
                                    </el-input>
                                    <el-button 
                                        @click="clickGetCode()" 
                                        :disabled="now_interval !== 0">
                                        {{now_interval === 0 ? titleCode : now_interval+'秒后可重发'}}
                                    </el-button>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input 
                                        v-model="ruleForm.password" 
                                        prefix-icon="el-icon-key" 
                                        placeholder="请输入要修改的密码" 
                                        show-password 
                                        @keyup.enter.native="passwordChange()">
                                    </el-input>
                                </el-form-item>
                                <el-button 
                                    class="login-btn" 
                                    icon="el-icon-refresh-right"
                                    @click="passwordChange()" 
                                    :loading="loading"
                                    plain>
                                    修改密码
                                </el-button>
                                <div class="regOrPwd">
                                    <a href="index">去登录</a>
                                </div>
                            </template>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        {include file="login/footer" /}
    </div>
</div>
{include file="$component" /}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                captchaUrl: 'login/verify',
                emailCodeUrl: 'login/passwordEmailCode',
                passwordUrl: 'login/password',
                loading: false,
                captcha: "",
                captchaShow: false,
                emailRegular: false,
                titleCode: '获取验证码',
                now_interval: 0,
                interval: 60,
                timer: '',
                ruleForm: {
                    email: "",
                    password: "",
                    code: "",
                    captcha: "",
                },
                rules: {
                    email: [
                        { required: true, message: '请输入邮箱号', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            /**
             * 显示获取邮箱验证码
             */
            showGetCode() {
                let myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                this.emailRegular = myreg.test(this.ruleForm.email);
            },
            /**
             * 点击获取邮箱验证码
             */
            clickGetCode() {
                this.getCaptcha();
                this.ruleForm.captcha = "";
                this.captchaShow  = true;
            },
            /**
             * 获取邮箱验证码
             */
            getEmailCode() {
                let self = this;
                if (self.now_interval == 0) {
                    self.loading = true;
                    request.post(self.emailCodeUrl, {captcha: self.ruleForm.captcha, email: self.ruleForm.email}, function(res){
                        if (res.status === 'success') {
                            self.captchaShow  = false;
                            self.now_interval = 60;
                            self.timer        = setInterval(() => {
                                if (self.now_interval > 0) {
                                    self.now_interval--;
                                }
                            }, 1000);
                        } else {
                            self.getCaptcha();
                            self.ruleForm.captcha = "";
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        }
                        self.loading = false;
                    })
                }
            },
            /**
             * 获取验证码
             */
            getCaptcha() {
                this.captcha = admin_url(this.captchaUrl) + '&' + Math.random();
            },
            /**
             * 修改密码
             */
            passwordChange() {
                let self = this;
                self.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        request.post(self.passwordUrl, self.ruleForm, function(res){
                            self.loading = false;
                            if (res.status === "success") {
                                self.$refs.ruleForm.resetFields();
                                self.$message({ showClose: true, message: res.message, type: res.status, onClose:function(){location.href = 'index'}});
                            } else {
                                self.$message({ showClose: true, message: res.message, type: res.status});
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    })
</script>
{include file="$footer" /}